<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            /* 字体颜色，也可以用颜色代码表表示 */
            color: yellow;

            /* 背景颜色 */
            background-color: red;

            /* 字体粗细 100~900 */
            font-weight: 600;

            /* 字体大小 */
            font-size: 20px;

            /* 字体倾斜 */
            font-style: italic;

            /* 文本对齐方式，默认在左边 */
            text-align: right;

            /* 字体样式 */
            font-family: 宋体;
        }

        .c2 {
            /* 两端对其 */
            text-align: justify;
        }

        .c3{
            width: 300px;
            height: 300px;
            background-color: gray;

            /* 水平居中 */
            text-align: center;

            /* 垂直居中，值等于height的值 */
            line-height: 300px;
        }

        img{
            height: 100px;
            width: 100px;

            /* 图片和文字相对位置的微调，一般应用在img标签或者图标标签 */
            vertical-align: -44px;
        }
    </style>
</head>
<body>

<!-- 常见文本样式 -->
<p class="c1">TOM</p>


<!-- 两端对齐 -->
<p class="c2">sfjas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;
    slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjd
    l;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflk
    sjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkj
    as;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ld
    fjsa;ldfjsa;ldfkj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldf
    kj;asas;dfjas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa;ldfjsa;ldfkj;asas;df
    jas;fjsfsdklfja;sljf;lkasjflksjdl;fkjas;ldfja;slfjas;ldfjsa
    ;slfjas;ldfjsa;ldfjsa;ldfkj;aslfjd;slakjfa;ljdflajfdas;fjsa;ldfjas;dfjas;dfjas;ldfjas;ld
    fjas;ldfjas;ldfjasl;dfjaskldfjasl;dfjal;sdfjas;ldfjaslkfjdasdf
</p>


<!-- 水平和垂直居中 -->
<div class="c3">Jerry</div>


<!-- 在html中，图片也可以看做是一个文本 -->
<!-- 图片和文字相对位置的微调 -->
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2986333581,3955387280&fm=26&gp=0.jpg" >中国

</body>
</html>
